<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Reckoning
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20090629

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Reckoning by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<p id="notice"><%= notice %></p>
<div id="header" id="title">
<p style="font-family: Times New Roman, serif; font-size: 45pt; padding-top: 17px;">Simulations</p>
</div>



<div id="container">

<script type="text/javascript">
$(document).ready(function() {
		Highcharts.setOptions({
			global: {
				useUTC: true
			}
		});	
		var options = {
				chart: {
						renderTo: 'graph_display',
						defaultSeriesType: 'area',
						marginRight: 10
				},
				colors: [
							'#4572A7',
							'#89A54E',
							'#AA4643'
				],
				title: {
						text: 'Simulation of Preferences'
				},
				xAxis: {
						type: 'datetime'
				},
				yAxis: {
						title: {
							text: 'Energy Kwh'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
				},
				tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
								Highcharts.numberFormat(this.y, 2);
						}
				},
				plotOptions: {
						area: {
								marker: {
										enabled: false,
										symbol: 'circle',
										radius: 2,
										states: {
												hover: {
														enabled: true
												}
										}
								}
						}
				},
				series:[]
		};
		
		$.get('simData', function(data) {
				// Split the lines
				var lines = data.split('\n');
				$.each(lines, function(lineNo, line) {
						var items = line.split(',');
				
						var series = {
								pointInterval: 5 * 60000,
								pointStart: Date.UTC(2012, 0, 01),
								data: []
						};
						$.each(items, function(itemNo, item) {
								if (itemNo == 0) {
										series.name = item;
								} else {
										series.data.push(parseFloat(item));
								}
						});
						
						options.series.push(series);
				});
		
				var chart = new Highcharts.Chart(options);
		});
});
</script></div>		
 <p><br/> </p>   			


	
		
		<!-- 3. Add the container -->
				
	
<!--
<div>	
<h2>Money Saved</h2>
<table>

	<tr>
		<td>
			
		</td>
	</tr>
</table>
</div>
-->
<div id="graph_display">

</div>
<div id="footer">
<%= link_to 'Home Page  ', main_path %> |
<%= link_to 'Dashboard  ', dashboard_path %>
</div>

</body>
</html>